<template>
  <div>
    <h1>App</h1>
    <h2>{{ $route.fullPath }}</h2>
    <ul>
      <li>
        <RouterLink to="/user">/user</RouterLink>
      </li>
      <li>
        <RouterLink to="/user/posts/10">/user/posts</RouterLink>
      </li>

    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();

setTimeout(() => {
  // router.push('/user/posts/40')
  // router.push({
  //   path: '/user/posts/30',
  // });
  // router.push({
  //   name: 'user-posts',
  //   params: { id: 20, }
  // });
  // router.push('/user/posts/40?name=lili&age=20')
  // router.push({
  //   path: '/user/posts/40?name=lili&age=20'
  // })
  router.push({
    path: '/user/posts/40',
    query: { name: 'rose', age: 20 }
  })
  // router.push({
  //   name: 'user-posts',
  //   params: { id: 20, },
  //   query: { name: 'jack', age: 20 }
  // })
}, 5000)

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
